﻿@{
    Layout = "_LayoutForm";
}

@section headers{
    <link rel="stylesheet" href="~/lib/wizard/wizard.css" />
    <link rel="stylesheet" href="~/lib/wdtree/tree.css" />
}

<form id="form1">
    <input id="Id" name="Id"  type="hidden"/>
    <div class="widget-body">
        <div id="wizard" class="wizard" data-target="#wizard-steps" style="border-left: none; border-top: none; border-right: none;">
            <ul class="steps">
                <li data-target="#step-1" class="active"><span class="step">1</span>角色信息<span class="chevron"></span></li>
                <li data-target="#step-2"><span class="step">2</span>功能权限<span class="chevron"></span></li>
            </ul>
        </div>


        <div class="step-content" id="wizard-steps" style="border-left: none; border-bottom: none; border-right: none; height:280px">
            <div class="step-pane active" id="step-1" style="margin: 10px; margin-bottom: 0px;">

                <table class="form">
                    <tr>
                        <th class="formTitle">角色名称</th>
                        <td class="formValue">
                            <input id="Name" name="Name" type="text" class="form-control required" maxlength="50" placeholder="请输入角色名称" />
                        </td>
                    </tr>
                    <tr>
                        <th class="formTitle">显示顺序</th>
                        <td class="formValue">
                            <input id="SortCode" name="SortCode" type="text" class="form-control required" placeholder="请输入显示顺序" />
                        </td>
                    </tr>
                    <tr>
                        <th class="formTitle" style="height: 35px;">选项</th>
                        <td class="formValue" style="padding-top: 1px;">
                            <div class="ckbox">
                                <input id="AllowEdit" name="AllowEdit" type="checkbox"><label for="AllowEdit">允许编辑</label>
                            </div>
                            <div class="ckbox">
                                <input id="AllowDelete" name="AllowDelete" type="checkbox"><label for="AllowDelete">允许删除</label>
                            </div>
                            @*<div class="ckbox">
                                    <input id="EnabledMark" name="EnabledMark" type="checkbox" checked="checked"><label for="EnabledMark">有效</label>
                                </div>*@
                        </td>
                    </tr>
                    <tr>
                        <th class="formTitle" valign="top" style="padding-top: 5px;">
                            备注
                        </th>
                        <td class="formValue">
                            <textarea id="Description" name="Description" maxlength="100" class="form-control" style="height: 60px;"></textarea>
                        </td>
                    </tr>
                </table>

            </div>
            <div class="step-pane" id="step-2" style="margin: 10px; margin-bottom: 0px;">
                <div id="permissionTree"></div>
            </div>
        </div>


        <div class="form-button col-md-12" id="wizard-actions" style=" text-align:right">
            <a id="btn_last" disabled class="btn btn-default btn-prev">上一步</a>
            <a id="btn_next" class="btn btn-default btn-next">下一步</a>
            <a id="btn_finish" class="btn btn-primary" style="display: none;" onclick="submitForm()">完成</a>
        </div>

    </div>

</form>

@section scripts{
    <script src="~/lib/wizard/wizard.js"></script>
    <script src="~/lib/wdtree/tree.min.js"></script>
    <script type="text/javascript">
        $(function () {
            initControl();
            $("#form1").formValid();
        });

        function initControl() {
            $('#wizard').wizard().on('change', function (e, data) {
                var $finish = $("#btn_finish");
                var $next = $("#btn_next");
                if (data.direction == "next") {
                    switch (data.step) {
                        case 1:
                            if (!$('#form1').valid()) {
                                return false;
                            }
                            $finish.show();
                            $next.hide();
                            break;
                        default:
                            break;
                    }
                } else {
                    $finish.hide();
                    $next.show();
                }
            });
            $("#form1").formSerialize(@Html.Raw(ViewData["Model"]));
            $("#permissionTree").treeview({
                height: 260,
                showcheck: true,
                data:@Html.Raw(ViewData["tree"])
            });
        };

        function submitForm() {
            var postData = $("#form1").formSerialize();
            postData["permissionIds"] = $("#permissionTree").getCheckedNodes();
            $.fn.submitForm({
                url: "/Role/Edit",
                param: postData,
                success: function () {
                    $.currentIframe().$('#table').bootstrapTable('refresh');
                }
            });
        }

    </script>
}